<template>
  <div class="tdesign-demo-item--layout">
    <t-layout>
      <t-header>
        <div class="affix-base">
          <t-affix :offset-top="0" :offset-bottom="20" ref="affix">
            <t-head-menu
              theme="light"
              :defaultValue="active"
              @change="changeHandler"
              :collapsed="collapsed"
              height="120px"
            >
              <template #logo>
                <t-tooltip theme="light">
                  <img
                    style="margin: 10%"
                    :width="collapsed ? 35 : 136"
                    :src="iconUrl"
                    alt="logo"
                  />
                  <!-- <t-button variant="outline">带箭头文字提示</t-button> -->
                  <div slot="content"><div id="he-plugin-standard"></div></div>
                </t-tooltip>
              </template>
              <t-menu-item
                v-for="item in menu"
                :key="item.id"
                :value="item.name"
              >
                <template #icon>
                  <icon :name="item.iconName" />
                </template>
                {{ item.title }}
              </t-menu-item>
              <template #operations>
                <icon class="t-menu__operations-icon" name="search" />
                <icon class="t-menu__operations-icon" name="user" />
                <icon
                  class="t-menu__operations-icon"
                  name="notification-filled"
                />
                <icon
                  class="t-menu__operations-icon"
                  name="view-list"
                  @click.native="changeCollapsed"
                />
              </template>
            </t-head-menu>
          </t-affix>
        </div>
      </t-header>
      <t-layout>
        <cssDoodle style="bottom: 80px; top: 80px"></cssDoodle>
        <cssDoodle style="bottom: 80px; right: 90px"></cssDoodle>
        <t-content>
          <router-view />
        </t-content>
        <t-footer style="z-index: 10">
          <div style="display: flex; justify-content: space-around">
            <div>
              Copyright @ 2021-{{ new Date().getFullYear() }} Carp. All Rights
              Reserved
            </div>
            <a target="_blank" href="https://github.com/">
              <icon name="logo-github-filled" />
            </a>
            <a target="_blank" href="https://github.com/">
              <icon name="logo-github-filled" />
            </a>
          </div>
        </t-footer>
      </t-layout>
    </t-layout>
  </div>
</template>

<script>
import router from "../router";
import { Icon } from "tdesign-icons-vue";
import storage from "../packaging/storage.js";
import cssDoodle from "../components/cssDoodle.vue";
export default {
  components: {
    Icon,
    cssDoodle,
  },
  data() {
    return {
      menu: [
        {
          id: 1,
          title: "首页",
          name: "home",
          iconName: "home",
        },
        {
          id: 2,
          title: "资源列表",
          name: "resource",
          iconName: "server",
        },
        {
          id: 3,
          title: "根目录",
          name: "root",
          iconName: "root-list",
        },
        {
          id: 4,
          title: "消息区",
          name: "mail",
          iconName: "mail",
        },
        {
          id: 5,
          title: "视频区",
          name: "play-circle",
          iconName: "play-circle",
        },
        {
          id: 6,
          title: "个人中心",
          name: "user-circle",
          iconName: "user-circle",
        },
      ],
      active: "home",
      collapsed: false,
      iconUrl: "https://www.tencent.com/img/index/menu_logo_hover.png",
    };
  },

  computed: {
    iconName() {
      return this.collapsed ? "chevron-right" : "chevron-left";
    },
  },
  updated() {
    this.active = storage.storageGet("list");
  },
  created() {
    this.active = storage.storageGet("list");
    router.push(storage.storageGet("list"));
    /**和风天气 */
    window.WIDGET = {
      CONFIG: {
        layout: "2",
        width: 280,
        height: 360,
        background: "1",
        dataColor: "FFFFFF",
        borderRadius: "10",
        key: "01610a37674f4ac2b8259a3fd3ebe667", //这里换成自己的key！
      },
    };
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  methods: {
    changeHandler(active) {
      storage.storageSet("list", active);
      this.active = storage.storageGet("list");
      // 正在尝试访问 admin 页面
      router.push("/" + active).catch(() => {
        this.$notify.error({
          title: "请不要重复点击",
          duration: 3000,
        });
      });
    },
    changeCollapsed() {
      this.collapsed = !this.collapsed;
      this.iconUrl = this.collapsed
        ? "https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png"
        : "https://www.tencent.com/img/index/menu_logo_hover.png";
    },
  },
};
</script>

<style lang="scss" scoped>
.content_layout {
  background: url("https://hello-cloudbase-3gw8f5h0ac31340e-1259504677.tcloudbaseapp.com/VUE/bg.png")
    no-repeat;
}
.t-layout__content {
  height: 100%;
  .t-col {
    margin-top: 1%;
  }
}
</style>
